<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号注册</title>
    <link href="${pageContext.request.contextPath}/static/semantic/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/static/image/background.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size: cover;
        }

    </style>
</head>
<body>
<div class="ui container">
    <div class="ui stackable grid">
        <div class="ten wide column"></div>
        <div id="register" class="five wide column" style="padding: 120px 0px !important;">
            <form id="form" action="${pageContext.request.contextPath}/register" method="post" class="ui form segment  b-border-radius b-padding-tx" style="background: #f5f5f9">
                <h2 class="ui center aligned icon header">
                    <i class="circular user plus icon"></i>注册
                </h2>
                <div class="field">
                    <label><i class="user icon"></i>账号</label>
                    <input type="text" name="account" placeholder="输入你的账号">
                </div>
                <div class="field">
                    <label><i class="address card icon"></i>用户名</label>
                    <input type="text" name="username" placeholder="输入你的用户名">
                </div>
                <div class="field ">
                    <label><i class="unlock icon"></i>密码</label>
                    <input type="password" name="password" placeholder="输入你的密码">
                </div>
                <div class="field ">
                    <label><i class="unlock icon"></i>重复密码</label>
                    <input type="password" name="password1" placeholder="输入你的密码">
                </div>
                <div style="text-align: center">
                    <button class="ui button  basic" type="submit">注册</button>
                    <a href="${pageContext.request.contextPath}/toLogin">返回登录</a>
                </div>
                <div class="ui error message"></div>
            </form>
            <c:if test="${msg!=null}">
                <div class="ui error message">
                    <ul class="list">
                        <li>${msg}</li>
                    </ul>
                </div>
            </c:if>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.4.1.js"></script>
<script src="static/semantic/semantic.min.js"></script>
<script>
    $('.ui.checkbox')
        .checkbox()
    ;
    $("#form").form({
        on:"blur",
        fields:{
            account: {
                identifier:"account",
                rules:[
                    {
                        type:"regExp[/^[a-z0-9_-]{6,}$/]",
                        prompt: "请输入以字母、数字或_组成的大于6位账号"
                    }
                ]
            },
            username:{
                identifier: "username",
                rules: [
                    {
                        type: 'minLength[2]',
                        prompt: "请输入大于2位的用户名"

                    }
                ]

            },
            password:{
                identifier:"password",
                rules:[
                    {
                        type:"regExp[/^[a-zA-Z_]+?[a-z0-9_-]{5,}$/]",
                        prompt: "请输入由字母、数字或_组成且以字母开头大于6位的密码"
                    },
                    {
                        type: 'different[account]',
                        prompt:'密码不能与用户名相同'
                    }
                ]
            },
            password1:{
                identifier:"password1",
                rules:[
                    {
                        type:"match[password]",
                        prompt: "输入两次密码不一致"
                    }
                ]
            }

        }
    });




</script>
</body>
</html>